<template>
    <div class="body discuss">
        <!-- 商品 -->
        <div class="sp_idear" v-if="JSON.stringify(disscussInfo) != '{}'">
            <div class="maleri30">
                <img :src="disscussInfo.order_goods.img_link" />
                <div class="com_igy p">
                    <p class="confine-wsp">
                        {{ disscussInfo.order_goods.goods_name }}
                    </p>
                    <p class="confine-wsp shuxg"></p>
                </div>
            </div>
        </div>
        <!-- 文本 -->
        <div class="customer-messa comm_text_goods">
            <div class="maleri30">
                <textarea
                    class="tapassa"
                    v-model="disText"
                    id="content_13"
                    maxlength="200"
                    name="content"
                    placeholder="写下购买体会和使用感受来帮助其他小伙伴~"
                ></textarea>
                <!--<span class="xianzd"><em id="zero">200</em>/200</span>-->
            </div>
        </div>
        <!-- 图片 -->
        <div class="seravetype">
            <div class="maleri30">
                <ul id="imglen">
                    <label v-for="(item, index) in imgSrc" :key="index">
                        <li class="file">
                            <div class="shcph">
                                <img :src="item.imgUrl" />
                            </div>
                        </li>
                    </label>
                    <label @click="checkImg" v-show="imgSrc.length <= 5">
                        <li class="file">
                            <div class="shcph" id="fileList0">
                                <img src="../../assets/images/camera.png" />
                            </div>
                        </li>
                    </label>
                    <input
                        class="file_upload"
                        id="file_1"
                        type="file"
                        accept="image/*"
                        name="portrait_image"
                        style="display: none"
                        required="required"
                        multiple="multiple"
                        ref="filElem"
                        @change="getFile"
                    />
                </ul>
                <div class="inspectrepot p">
                    <div class="radio">
                        <span
                            class="che"
                            :class="{ check_t: isNiming }"
                            @click="isNiming = !isNiming"
                        >
                            <i></i>
                            <span>匿名评价</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 标题 -->
        <div class="wlcomenser ma-to-20">
            <div class="maleri30">
                <div class="p_zyft p">
                    <p class="fl">星级评价</p>
                    <p class="fr lifi">满意请给5星哦</p>
                </div>
            </div>
        </div>
        <div class="thirs_commen jsstar">
            <div class="maleri30">
                <div
                    class="al_comentaid p"
                    v-for="(item, index) in startList"
                    :key="index"
                >
                    <div class="taidh">{{ item.name }}</div>
                    <div class="star_click">
                        <span
                            class="comment-item-star_wr"
                            title="1"
                            v-for="(el, i) in item.star"
                            :key="i"
                            @click="checkStar(item.id, i)"
                        >
                            <span
                                class="real-star_wr"
                                :class="{ 'comment-stars-width5': el }"
                            ></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="j_newbutton">
            <div class="j_newbtn" @click="submitDiscuss">提交评价</div>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPostnotoken, axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            disscussInfo: {},
            disText: '', // 评价文本
            imgSrc: [], // 图片地址
            isNiming: false, // 是否匿名
            startList: [
                {
                    id: 'goods_rank',
                    name: '商品符合度',
                    star: [false, false, false, false, false],
                    num: 0,
                },
                {
                    id: 'service_rank',
                    name: '店家服务态度',
                    star: [false, false, false, false, false],
                    num: 0,
                },
                {
                    id: 'deliver_rank',
                    name: '物流速度',
                    star: [false, false, false, false, false],
                    num: 0,
                },
            ],
        };
    },
    computed: {},
    mounted() {
        this.getDisscussInfo();
    },
    methods: {
        // 获取订单评价信息
        getDisscussInfo() {
            axiosPost(
                '/api/order/getCommentOrderInfo',
                {
                    rec_id: this.$route.query.rec_id,
                },
                (res) => {
                    // console.log(res);

                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.disscussInfo = res.data;
                }
            );
        },
        // 提交评价 this.disscussInfo.order_info
        submitDiscuss() {
            if (!this.disText) {
                return Toast({
                    message: '请输入评价内容',
                    duration: 2000,
                });
            }
            let newnum = 0;
            this.startList.forEach((el) => {
                if (el.num == 0) {
                    newnum++;
                }
            });
            if (newnum != 0) {
                return Toast({
                    message: '请选择星级',
                    duration: 2000,
                });
            }
            let imglist = '';
            this.imgSrc.forEach((el) => {
                imglist += el.imgUrl + ',';
            });
            axiosPost(
                '/api/order/add_comment',
                {
                    rec_id: this.$route.query.rec_id,
                    order_id: this.disscussInfo.order_info.order_id,
                    goods_id: this.disscussInfo.order_goods.goods_id,
                    item_id: this.disscussInfo.order_goods.item_id,
                    content: this.disText,
                    hide_username: this.isNiming ? '1' : '0',
                    images: imglist.substr(0, imglist.length - 1),
                    service_rank: this.startList[1].num,
                    deliver_rank: this.startList[2].num,
                    goods_rank: this.startList[0].num,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                }
            );
        },
        // 星级选择
        checkStar(id, i) {
            this.startList = this.startList.map((item) => {
                if (item.id == id) {
                    item.star = item.star.map((el, j) => {
                        if (j <= i) {
                            el = true;
                        } else {
                            el = false;
                        }
                        return el;
                    });
                    item.num = i + 1;
                }
                return item;
            });
        },
        //换取图片
        changeimg(id, url) {
            // console.log(id);
            axiosPostnotoken(
                '/api/upload/base64',
                {
                    image: url,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000,
                        });
                    }
                    // console.log(res);

                    this.imgSrc[id].imgUrl = res.data.src;
                    // console.log(this.imgSrc);
                }
            );
        },
        // 读取图片并压缩
        readFile(index, inputFile) {
            let that = this;
            if (inputFile) {
                if (
                    inputFile.type !== 'image/jpeg' &&
                    inputFile.type !== 'image/png' &&
                    inputFile.type !== 'image/gif'
                ) {
                    return Toast({
                        message: '不是有效的图片文件！',
                        duration: 1000,
                    });
                }

                const reader = new FileReader();
                reader.readAsDataURL(inputFile);
                reader.onload = function () {
                    that.imgSrc.push({
                        link: this.result,
                        imgUrl: '',
                        imgstate: 4,
                    });
                    let img = new Image();
                    img.src = this.result;
                    var width = 750, //图像大小
                        height = 1000, //图像大小
                        quality = 1, //图像质量
                        canvas = document.createElement('canvas'),
                        drawer = canvas.getContext('2d');
                    img.onload = function () {
                        const originHeight = img.height;
                        const originWidth = img.width;
                        let compressedWidth = img.height;
                        let compressedHeight = img.width;
                        if (originWidth > width && originHeight > height) {
                            // 更宽更高，
                            if (originHeight / originWidth > height / width) {
                                // 更加严重的高窄型，确定最大高，压缩宽度
                                compressedHeight = height;
                                compressedWidth =
                                    height * (originWidth / originHeight);
                            } else {
                                //更加严重的矮宽型, 确定最大宽，压缩高度
                                compressedWidth = width;
                                compressedHeight =
                                    width * (originHeight / originWidth);
                            }
                        } else if (
                            originWidth > width &&
                            originHeight <= height
                        ) {
                            // 更宽，但比较矮，以width作为基准
                            compressedWidth = width;
                            compressedHeight =
                                width * (originHeight / originWidth);
                        } else if (
                            originWidth <= width &&
                            originHeight > height
                        ) {
                            // 比较窄，但很高，取maxHight为基准
                            compressedHeight = height;
                            compressedWidth =
                                height * (originWidth / originHeight);
                        } else {
                            // 符合宽高限制，不做压缩
                        }
                        canvas.width = compressedWidth;
                        canvas.height = compressedHeight;
                        drawer.drawImage(
                            img,
                            0,
                            0,
                            canvas.width,
                            canvas.height
                        );
                        that.changeimg(
                            index,
                            canvas.toDataURL('image/jpg', quality)
                        );
                        that.$refs.filElem.value = '';
                    };
                };
            } else {
                return;
            }
        },
        // 获取图片，并进行循环调用
        getFile(e) {
            for (let i = 0; i < e.target.files.length; i++) {
                this.readFile(this.imgSrc.length + i, e.target.files[i]);
            }
        },
        checkImg() {
            // console.log;
            this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
        },
    },
};
</script>

<style lang="less" scope>
.discuss {
    .sp_idear {
        padding: 0.55rem 0;
    }
    .sp_idear img {
        width: 2.88rem;
        height: 2.88rem;
    }
    .com_igy p {
        font-size: 0.55rem;
        color: #222222;
        margin-top: 0.23rem;
        width: 10.53rem;
        height: 0.8rem;
        line-height: 0.8rem;
    }
    .com_igy .shuxg {
        margin-top: 1.1rem;
    }
    .comm_text_goods {
        padding: 0;
    }
    .comm_text_goods .tapassa {
        padding: 0.68rem 0;
        font-size: 0.55rem;
        color: #1c1c1c;
        margin: 0;
        min-height: 4.27rem;
        background-color: #f3f3f3;
    }
    .seravetype ul li {
        margin: 0;
    }
    .seravetype {
        padding: 0.85rem 0 0.62rem 0;
    }
    .seravetype ul li .shcph {
        border: none;
    }
    .inspectrepot .radio .che span {
        font-size: 0.55rem;
        line-height: 0.85rem;
    }
    .radio i {
        margin: 0;
        width: 0.85rem;
        height: 0.85rem;
    }
    .inspectrepot .radio {
        padding-top: 0.83rem;
        padding-bottom: 0;
    }
    .wlcomenser {
        border-top: 0.34rem solid #f3f3f3;
        border-bottom: 0;
        margin-top: 0;
    }
    .p_zyft p {
        border-left: 0.09rem solid #222222;
        padding-left: 0.36rem;
        font-size: 0.55rem;
        font-weight: bold;
    }
    .p_zyft p:last-child {
        border: none;
        font-size: 0.55rem;
        color: #666666;
        font-weight: 400;
    }
    .al_comentaid .taidh {
        font-size: 0.55rem;
        color: #151515;
        padding-left: 0.4rem;
    }
    .p_zyft {
        padding-bottom: 0;
    }
    .classreturn .content .search {
        font-size: 0.73rem;
    }
    .classreturn .content .return a img {
        width: 0.7rem;
    }
    .radio i {
        background-image: url(../../assets/images/check.png);
    }
}
</style>
